import React, { useState ,useEffect} from "react";

import type { ColumnsType } from "antd/es/table";
import {notification} from 'antd'
import {
  FileSearchOutlined,
  StarOutlined,
  DeleteOutlined,
} from "@ant-design/icons";
import './Focus.scss'
import "./index.scss";
import Table from "antd/es/table";
import * as service from '../../../../api/cgg/index'
interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
  pro: any;
}
const Focus = () => {

  var [data,setFouData]=useState([])
  useEffect(() => {
    var query = async () => {
      var res = await service.findProductByAttention({
        page: 1,
        limit: 100,
        attention:1
      });
      console.log(res.data);  
      res.data.data.records.forEach((item:any,index:any)=>{
        item.key=index
      })
      setFouData(res.data.data.records)
    };
    query();
  }, []);
const columns: ColumnsType<DataType> = [
  {
    title: "图片",
    // dataIndex: "img",
    render: (records) => 
      <img
        src={records.productPic}
        alt="" width={70}
      />
   
  },
  {
    title: "名称",
    dataIndex: "productName",
  },
  {
    title: "产品线",
    dataIndex: "productLine",
  },
  {
    title: "品类",
    dataIndex: "productType",
  },
  {
    title: "时间",
    dataIndex: "productCreattime",
  },
  {
    title: "状态",
    dataIndex: "flag",
    render: (productState) => (
      <span className="state">
        {" "}
        <span className={`zt ${productState == 0 ? "" : "active"}`}>·</span>
        状态
      </span>
    ),
  },
  {
    title: "详情",
    dataIndex: "xq",
    render: () => (
      <FileSearchOutlined style={{ color: "orange", fontSize: "25px" }} />
    ),
  },
  {
    title: "收藏",
    dataIndex: "bj",
    render: () => <StarOutlined style={{ color: "green", fontSize: "25px" }} />,
  },
  {
    title: "删除",
    dataIndex: "sj",
    render: (_:any,record:any) => <DeleteOutlined onClick={() => flag(record.productId)} style={{ color: "red", fontSize: "25px" }} />,
  },
];
var flag =async (productId:any) => {
  console.log(productId);
  
    var res =await service.deleteProduct({pid:productId})
    if(res.data.code==200){
      var newData = JSON.parse(JSON.stringify(data));
      var i:any = newData.findIndex((item:any)=>item.productId==productId)
      if(i !=-1){
        newData.splice(i,1)
        setFouData(newData);
      }
      notification.success({message:'删除成功'})

    }else{
      notification.error({message:'删除失败'})

    }
};
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
  console.log("selectedRowKeys changed: ", newSelectedRowKeys);
  setSelectedRowKeys(newSelectedRowKeys);
};

const rowSelection = {
  selectedRowKeys,
  onChange: onSelectChange,
};
  return <div>
    <Table rowSelection={rowSelection} columns={columns} dataSource={data}/>
  </div>;
};

export default Focus;
